<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ywl的个人blog</title>
    <style>
        /* 基础样式重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        
        /* 主容器使用Flex布局，包含主要内容和侧边元素 */
        .main-container {
            display: flex;
            gap: 10px; /* 主内容与侧边的间距 */
        }
        
        /* 主要内容区域 */
        .main-content {
            flex: 1; /* 占据大部分空间 */
        }
        
        /* 侧边区域 - 包含横线、搜索框和近期文章 */
        .sidebar {
            width: 450px; /* 固定侧边宽度 */
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 内容左对齐 */
        }
        
        /* 横线样式 - 上下横线格式统一 */
        .sidebar-line {
            width: 100%; /* 横线宽度与侧边同宽 */
            height: 1px;
            background-color: #333; /* 横线颜色 */
            margin: 10px; /* 上下间距 */
        }
        
        /* 搜索区域容器 */
        .search-container {
            width: 100%;
            display: flex;
            gap: 5px; /* 搜索框与按钮之间的间距 */
            margin-bottom: 10px;
        }
        
        /* 搜索框样式 - 调整宽度为较小尺寸 */
        .search-box {
            width: 400px; /* 固定搜索框宽度，使其更小 */
            padding: 4px 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        
        /* 提交按钮样式 */
        .search-button {
            padding: 8px 16px;
            background-color: #6cce6c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .search-button:hover {
            background-color: #45a049; /* 悬停效果 */
        }
        
        /* 近期文章区域 */
        .recent-posts {
            width: 100%;
        }
        
        .recent-posts h3 {
            margin: 5px 0;
            font-size: 18px;
            color: #333;
        }
        
      
        
        .recent-posts li {
            margin: 8px 0;
        }
        
        .recent-posts a {
            color: #2c3e50;
            text-decoration: none;
        }
        
        .recent-posts a:hover {
            color: #ebedef;
            text-decoration: underline;
        }
        
        /* 内容容器使用Flex布局实现对齐 */
        .content-container {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin: 20px 0;
        }
        
        .date-section {
            width: 200px;
        }
        
        .welcome-message {
            flex: 1;
        }
        
        /* 响应式适配 */
        @media (max-width: 768px) {
            .main-container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-top: 30px;
            }
            
            .search-box {
                width: 100%; /* 在小屏幕上搜索框恢复全屏宽度 */
            }
        }
        /* 新增：将右侧内容整体往下挪 */
    .sidebar {
        margin-top: 66px !important; /* 通过增加顶部外边距使整个侧边栏下移 */
        }
        /* 新增：将右侧列表内容的字体改成蓝色 */
    .sidebar .recent-posts li,
    .sidebar .recent-posts a {
        color: #0066cc !important; /* 蓝色字体 */
    }

    /* 优化链接悬停效果，保持蓝色系 */
    .sidebar .recent-posts a:hover {
        color: #004080 !important; /* 稍深的蓝色 */
        text-decoration: underline;
    }
    /* 登录相关样式 */
    #btnOpenLogin {
      margin-top: 12px;
      padding: 8px 12px;
      background: #fff;
      color: #ab1be8;
      border: 1px solid #fff;
      cursor: pointer;
    }
    .site-header-right{
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    #loginMask {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.35);
    }

    #loginModal {
      display: none;
      position: fixed;
      left: 50%;
      top: 20%;
      transform: translateX(-50%);
      width: 320px;
      background: #fff;
      border: 1px solid #e5e7eb;
      padding: 16px;
    }

    #loginModal h3 {
      margin: 0 0 12px;
      font-size: 18px;
    }

    #loginModal .form-row {
      margin-bottom: 12px;
    }

    #loginModal label {
      display: block;
      margin-bottom: 6px;
    }

    #loginModal input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #cbca74;
    }

    #loginModal .actions {
      text-align: right;
    }

    #btnCancelLogin {
      margin-right: 8px;
      padding: 8px 12px;
      background: #f3f4f5;
      border: none;
      cursor: pointer;
    }

    #btnSubmitLogin {
      padding: 8px 12px;
      background: #b3944d;
      color: #fff;
      border: none;
      cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="main-container">
        <!-- 主要内容区域 -->
        <div class="main-content">
            <div>
                <h1>ywl的个人blog</h1>
                <p>又一个wordPress站点<br><br></p>
                <button id="btnOpenLogin">登录</button>
            </div>
            <div>
                <h1><b>世界，您好!</b></h1>
                
                <div class="content-container">
                    <div class="date-section">
                        <p>2025年9月12日<br>有一条新评论</p>
                    </div>
                    
                    <div class="welcome-message">
                        <p>欢迎使用WordPress,这是您的第一篇文章，编辑或删除它，然后开始写作吧。</p>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 侧边区域 - 包含横线、搜索框和近期文章 -->
        <div class="sidebar">
            <!-- 上方横线 -->
            <div class="sidebar-line"></div>
            
            <!-- 搜索框和提交按钮 -->
            <div class="search-container">
                <input type="text" class="search-box" placeholder="搜索...">
                <button type="button" class="search-button">搜索</button>
            </div>
            
            <!-- 搜索框下方横线 - 与上方格式一致 -->
            <div class="sidebar-line"></div>
            
            <!-- 近期文章区域 -->
            <div class="recent-posts">
                <h3>近期文章</h3>
                <ul>
                    <li>世界您好</li>
                </ul>
            </div>
            <!-- 搜索框下方横线 - 与上方格式一致 -->
            <div class="sidebar-line"></div>
            
            <div class="recent-posts">
                <h3>近期评论</h3>
                <ul>
                    <li>WordPress发表栏《世界，你好》</li>
                </ul>
            </div>
            <div class="sidebar-line"></div>
            <div class="recent-posts">
                <h3>文章归档</h3>
                <ul>
                    <li>2016年1月</li>
                </ul>
            </div>
            <div class="sidebar-line"></div>
            <div class="recent-posts">
                <h3>分类目录</h3>
                <ul>
                    <li>未分类</li>
                </ul>
            </div>
            <div class="sidebar-line"></div>
            <div class="recent-posts">
                <h3>功能</h3>
                <ul>
                    <li>登录</li>
                </ul>
                <ul>
                    <li>文章RSS</li>
                </ul>
                <ul>
                    <li>评论RSS</li>
                </ul>
                <ul>
                    <li>WordPress.org</li>
                </ul>
            </div>
        </div>
    </div>
      <!-- 登录弹窗（最简实现） -->
  <div id="loginMask"></div>
  <div id="loginModal">
    <h3>登录</h3>
    <div class="form-row">
      <label for="loginUser">账号</label>
      <input id="loginUser" type="text" placeholder="请输入账号" />
    </div>
    <div class="form-row">
      <label for="loginPass">密码</label>
      <input id="loginPass" type="password" placeholder="请输入密码" />
    </div>
    <div class="actions">
      <button id="btnCancelLogin">取消</button>
      <button id="btnSubmitLogin">登录</button>
    </div>
  </div>
       <script>
    // 打开弹窗
    (function () {
      var btnOpen = document.getElementById('btnOpenLogin');
      var mask = document.getElementById('loginMask');
      var modal = document.getElementById('loginModal');
      var btnCancel = document.getElementById('btnCancelLogin');
      var btnSubmit = document.getElementById('btnSubmitLogin');
      var inputUser = document.getElementById('loginUser');
      var inputPass = document.getElementById('loginPass');

      function openModal() {
        mask.style.display = 'block';
        modal.style.display = 'block';
        inputUser.focus();
      }
      function closeModal() {
        mask.style.display = 'none';
        modal.style.display = 'none';
      }

      if (btnOpen) {
        btnOpen.addEventListener('click', openModal);
      }
      if (btnCancel) {
        btnCancel.addEventListener('click', closeModal);
      }
      if (mask) {
        mask.addEventListener('click', closeModal);
      }
      if (btnSubmit) {
        btnSubmit.addEventListener('click', function () {
          var u = inputUser.value || '';
          var p = inputPass.value || '';
          console.log('登录账号:', u, '登录密码:', p);
          closeModal();
        });
      }

      // 回车提交
      if (inputPass) {
        inputPass.addEventListener('keypress', function (e) {
          if (e.key === 'Enter') {
            btnSubmit.click();
          }
        });
      }
    })();
  </script>
</body>
</html>